<template>
	<view class="jobCard"  @click="toJobDetail">
		<view class="jobName">
			{{jobname}}
		</view>
		<view class="salary">
			<span>{{salary}}</span>
		</view>
		<view class="tag">
			<span v-for="item,index in tag" :key="index">{{item}}</span>
		</view>
		<view class="location">
			<image src="/static/img/homePagePic_slices/Group252@2x.png" alt=""></image>
			<!-- <span>{{location.distance?location.distance:''}}{{' '}}|{{'  '}}{{location.name}}</span> -->
			<span>{{distance}}km{{' '}}|{{'  '}}{{locationDesc}}</span>
		</view>
		<view class="boss">
			<image :src="merchantLogo" mode="" v-if="merchantLogo"></image>
			<view class="headname" v-if="!merchantLogo">
				<text>{{boss.substr(0,1)}}</text>
			</view>
			<span>{{boss}}</span>
		</view>
		<view class="button">
			
			<button>立即报名</button>
		</view>
	</view>
</template>

<script>
	import {getFlatternDistance} from '@/common/getFlatternDistance'
	export default {
		name:"jobCard",
		data() {
			return {
				jobname:'职位名称（只限12个字符）',
				salary:800,
				tag:['日结','长期兼职','有提成'],				
				location:{
					distance:NaN,
					name:"东莞市"
				},
				boss:"周泽龙·个人",
				merchantLogo:'',
				postId:'',
				locationDesc: '',
				locationInfo: {},
				lat: '',
				lng: '',
				distance: 0,
			}
		},
		props:{
			jobInfo:{
				type:Object,
				default(){
					return null
				}
			}
		},
		created() {
			
		},
		mounted() {
			this.jobname=this.jobInfo.postTitle
			this.salary=this.jobInfo.priceDesc
			this.tag=this.jobInfo.tags
			this.merchantLogo=this.jobInfo.merchantLogo
			this.postId=this.jobInfo.postId
			this.locationDesc=this.jobInfo.locationDesc
			this.distance = getFlatternDistance(this.jobInfo.lat,this.jobInfo.lng)
			if (this.jobInfo.merchantName) {
				this.boss=this.jobInfo.merchantName
			} else {
				this.boss='暂未设置名称'
			}
		},
		methods:{
			toJobDetail(){
				uni.navigateTo({
					url:'/subpageB/common/jobDetail?postId='+this.postId
				})
			},
		}
	}
</script>

<style scoped>
	.jobCard{
		position: relative;
		margin: 32rpx;
		width: 686rpx;
		height: 240rpx;
		background: #FFFFFF;
		border-radius: 16rpx;
		box-shadow: 0 0 20rpx rgba(235,235,235,0.7);
	}
	.jobName{
		/* position: absolute;
		transform: translate(32rpx,24rpx); */
		padding-top: 24rpx;
		padding-left: 32rpx;
		width: 360rpx;
		height: 40rpx;
		font-size: 28rpx;
		font-family: PingFang SC-Medium, PingFang SC;
		font-weight: bold;
		color: #001A18;
		line-height: 32rpx;
		-webkit-background-clip: text;
		margin-bottom: 8rpx;
	}
	.salary{
		position: absolute;
		top: 24rpx;
		right: 32rpx;
		font-size: 32rpx;
		font-weight: 600;
		color: #FF5F58;
		line-height: 38rpx;
	}
	.salary span{
		font-size: 40rpx;
	}
	.tag{
		padding-left: 32rpx;
		font-size: 10px;
		font-family: PingFang SC-Regular, PingFang SC;
		font-weight: 400;
		color: #505E5C;
		margin-bottom: 8rpx;
		
	}
	.tag span{
		margin-right: 6rpx;
		padding: 4rpx 8rpx;
		background: #F3F7F8;
		border-radius: 8rpx;
	}
	
	.location{
		padding-left: 32rpx;
		padding-top: 10rpx;
		font-size: 24rpx;
		font-family: PingFang SC-Regular, PingFang SC;
		font-weight: 400;
		color: #505E5C;
		line-height: 16px;
	}
	.location image{
		width:16rpx;
		height: 16rpx;
		margin-right: 8rpx;
	}
	
	.boss{
		padding-top: 20rpx;
		padding-left: 32rpx;
		font-size: 24rpx;
		font-family: PingFang SC-Regular, PingFang SC;
		font-weight: 400;
		color: #001A18;
		display: flex;
	}
	.boss>span{
		margin-bottom: 4rpx;
	}
	.boss image {
		width: 32rpx;
		height: 32rpx;
		vertical-align: -8rpx;
		padding-right: 6rpx;
	}
	.headname {
		background: #08C8BD;
		width: 32rpx;
		height: 32rpx;
		border-radius: 16rpx;
		font-size: 19rpx;
		color: #fff;
		display: flex;
		align-items: center;
		justify-content: center;
		margin-right: 8rpx;
	}
	
	button{
		display: flex;
		justify-content: center;
		align-items: center;
		position: absolute;
		right: 32rpx;
		bottom: 24rpx;
		width: 160rpx;
		height: 58rpx;
		background: #08C8BD;
		border-radius: 16rpx;
		font-size: 24rpx;
		font-family: PingFang SC-Medium, PingFang SC;
		font-weight: 500;
		color: #FFFFFF;
	}
	/* .button button{
		width: 160rpx;
		height: 60rpx;
		font-size: 12px;
		font-weight: 500;
		line-height: 20rpx;
		color: #FFFFFF;
		background: #08C8BD;
		border-radius: 8px 8px 8px 8px;
		
	} */
</style>